<template>
	<div class="angle">
		<div class="jiao"></div>
		<div class="jiao2"></div>
		<div class="padding-10 h-100% flex-col">
			<slot />
		</div>
	</div>
</template>

<script setup name="DvAngle"></script>

<style scoped lang="scss">
$jiao-width: 14px;
$jiao-color: #168ae4;

.angle {
	position: relative;
	background: rgb(4 7 17 / 70%);
	border: 1px solid rgb(0 116 255 / 20%);
	box-shadow: 0 0 40px 10px rgb(0 116 255 / 20%) inset;

	.jiao {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 100%;

		&::before {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			width: $jiao-width;
			height: $jiao-width;
			content: '';
			border: 1px solid;
			border-color: $jiao-color;
			border-right: 0;
			border-bottom: 0;
		}

		&::after {
			position: absolute;
			top: 0;
			right: 0;
			display: inline-block;
			width: $jiao-width;
			height: $jiao-width;
			content: '';
			border: 1px solid;
			border-color: $jiao-color;
			border-bottom: 0;
			border-left: 0;
		}
	}

	.jiao2 {
		position: absolute;
		bottom: 0;
		left: 0;
		display: inline-block;
		width: 100%;

		&::before {
			position: absolute;
			bottom: 0;
			left: 0;
			display: inline-block;
			width: $jiao-width;
			height: $jiao-width;
			content: '';
			border: 1px solid;
			border-color: $jiao-color;
			border-top: 0;
			border-right: 0;
		}

		&::after {
			position: absolute;
			right: 0;
			bottom: 0;
			display: inline-block;
			width: $jiao-width;
			height: $jiao-width;
			content: '';
			border: 1px solid;
			border-color: $jiao-color;
			border-top: 0;
			border-left: 0;
		}
	}
}
</style>
